<template>
  <div class="ebook-slide-contents">
    <div class="slide-contents-search-wrapper">
      <div class="slide-contents-search-input-wrapper">
        <div class="slide-contents-search-icon">
          <span class="iconfont">&#xe688;</span>
        </div>
        <input
          type="text"
          class="slide-contents-search-input"
          v-model="searchText"
          :placeholder="$t('book.searchHint')"
          @keyup.enter.exact="search()"
          @click="showSearchPage()"
        >
      </div>
      <div
        class="slide-contents-search-cancel"
        @click="hideSearchPage()"
        v-if="searchVisible"
      >{{$t('book.cancel')}}</div>
    </div>
    <div class="slide-contents-book-wrapper" v-show="!searchVisible">
      <div class="slide-contents-book-img-wrapper">
        <img :src="cover" alt="" class="slide-contents-book-img">
      </div>
      <div class="slide-contents-book-info-wrapper">
        <div class="slide-contents-book-title">
          <span class="slide-contents-book-title-text">{{metadata.title}}</span>
        </div>
        <div class="slide-contents-book-author">
          <span class="slide-content-book-author-text">{{metadata.creator}}</span>
        </div>
      </div>
      <div class="slide-contents-book-progress-wrapper">
        <div class="slide-contents-book-progress">
          <span class="progress">{{progress + '%'}}</span>
          <span class="progress-text">{{$t('book.haveRead2')}}</span>
        </div>
        <div class="slide-contents-book-time">{{getReadtimeText(this.fileName)}}</div>
      </div>
    </div>
    <scroll class="slide-contents-list"
            :top="156"
            :bottom="48"
            v-show="!searchVisible"
            >
      <div class="slide-contents-item"
           v-for="(item, index) in this.navigation"
           :key="index"
      >
        <span class="slide-contents-item-label"
              :class="{'selected': section === index}"
              :style="contentItemStyle(item)"
              @click="displayContent(item.href)"
        >
          {{item.label}}
        </span>
        <span class="slide-contents-item-page">{{item.page}}</span>
      </div>
    </scroll>
    <scroll class="slide-search-list"
            :top="66"
            :bottom="48"
            v-show="searchVisible">
      <div class="slide-search-item"
           v-for="(item, index) of searchList"
           :key="index"
           v-html="item.excerpt"
           @click="displayContent(item.cfi, true)"
      >
      </div>
    </scroll>
  </div>
</template>

<script>
import { ebookMixin } from '../../utils/mixin'
import Scroll from '../common/Scroll'
import { px2rem } from '../../utils/utils'

export default {
  name: 'EbookSlideContents',
  components: { Scroll },
  mixins: [ebookMixin],
  data () {
    return {
      searchVisible: false,
      searchList: null,
      searchText: ''
    }
  },
  methods: {
    search () {
      if (this.searchText && this.searchText.length > 0) {
        this.doSearch(this.searchText).then(results => {
          this.searchList = results
          this.searchList.map(item => {
            item.excerpt = item.excerpt.replace(this.searchText, `<span class="content-search-text">${this.searchText}</span>`)
            return item
          })
        })
      }
    },
    doSearch (q) {
      return Promise.all(
        this.currentBook.spine.spineItems.map(
          section => section.load(this.currentBook.load.bind(this.currentBook)) // 1、此时获取到了所有文本信息
            .then(section.find.bind(section, q)) // 2、调用section的搜索方法，传入q关键字
            .finally(section.unload.bind(section))) // 3、全部结束后讲资源进行释放
      ).then(result => Promise.resolve([].concat.apply([], result)))
      // 4、将结果进行处理，多维数组转为一维数组，使用空数组连接二维数组，形成一维数组
      // apply表示将内容作为参数传入，也就是将数组的对象，逐一的传入concat中
    },
    displayContent (target, highlight = false) {
      this.display(target, () => {
        this.hideTitleAndMenu()
        if (highlight) {
          // 将文章中的关键字高亮显示， annotation用来管理高亮类
          this.currentBook.rendition.annotations.highlight(target)
        }
      })
    },
    showSearchPage () {
      this.searchVisible = true
    },
    hideSearchPage () {
      this.searchVisible = false
      this.searchText = ''
      this.searchList = null
    },
    contentItemStyle (item) {
      return {
        marginLeft: `${px2rem(item.level * 15)}rem`
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/styles/global.styl'
  .ebook-slide-contents
    width: 100%
    /*font-size: 0*/
    .slide-contents-search-wrapper
      display: flex
      width: 100%
      height: px2rem(36)
      margin: px2rem(20) 0 px2rem(10) 0
      padding: 0 px2rem(15)
      box-sizing: border-box
      .slide-contents-search-input-wrapper
        flex: 1
        center()
        .slide-contents-search-icon
          flex: 0 0 px2rem(28)
          center()
          font-size: px2rem(12)
        .slide-contents-search-input
          flex: 1
          width: 100%
          height: px2rem(32)
          font-size: px2rem(14)
          // 背景透明色
          background: transparent
          border: none
      .slide-contents-search-cancel
        flex: 0 0 px2rem(50)
        font-size: px2rem(14)
        center()
    .slide-contents-book-wrapper
      display: flex
      width: 100%
      height: px2rem(90)
      padding: px2rem(10) px2rem(15) px2rem(20) px2rem(15)
      box-sizing: border-box
      .slide-contents-book-img-wrapper
        flex 0 0 px2rem(45)
        .slide-contents-book-img
          width: px2rem(45)
          height: px2rem(60)
      .slide-contents-book-info-wrapper
        flex: 1
        padding: 0 px2rem(10)
        box-sizing: border-box
        .slide-contents-book-title
          // 375*85%=318.75-30-20-45-720=153.75
          // width: px2rem(153.75)
          font-size: px2rem(14)
          line-height: px2rem(16)
          leftStyle()
          .slide-contents-book-title-text
            ellipsis2(3)
            // 垂直排列
        .slide-contents-book-author
          // width: px2rem(153.75)
          font-size: px2rem(12)
          margin-top: px2rem(5)
          line-height: px2rem(14)
          leftStyle()
          .slide-content-book-author-text
            ellipsis2(1)
      .slide-contents-book-progress-wrapper
        flex 0 0 px2rem(70)
        display: flex
        flex-direction: column
        justify-content: center
        align-items: flex-start
        .slide-contents-book-progress
          .progress
            font-size: px2rem(14)
          .progress-text
            font-size: px2rem(12)
        .slide-contents-book-time
          font-size: px2rem(12)
          margin-top: px2rem(10)
    .slide-contents-list
      padding: 0 px2rem(15)
      box-sizing: border-box
      .slide-contents-item
        display: flex
        padding: px2rem(20) 0
        box-sizing: border-box
        .slide-contents-item-label
          flex: 1
          font-size: px2rem(14)
          line-height: px2rem(16)
          ellipsis()
        .slide-contents-item-page
          flex: 0 0 px2rem(30)
          font-size: px2rem(10)
          rightStyle()
    .slide-search-list
      width: 100%
      padding: 0 px2rem(15)
      box-sizing: border-box
      .slide-search-item
        font-size: px2rem(14)
        line-height: px2rem(16)
        padding: px2rem(20) 0
        box-sizing: border-box
</style>
